<template>
    <div id="main" ref="refDiv"></div>
    <div id="main1" ref="refDiv1"></div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import { getView } from "@/api/api";
  export default {
    async mounted() {
      const res = await getView();
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.refDiv);
      let myChart1 = echarts.init(this.$refs.refDiv1);

      // 绘制图表
      myChart.setOption({
        title: {
          text: "ikun不食油饼管理系统", // 图表的标题
        },
        legend: {
          data: ["销量", "价格", "饼图"],
        },
        toolbox: {
          feature: {
            magicType: {
              type: ["bar", "line", "pie"],
            },
            dataView: {
              show: true,
            },
            restore: {
              show: true,
            },
            dataZoom: {
              show: true,
            },
            saveAsImage: {
              type: "png",
            },
          },
        },
        tooltip: {},
        xAxis: {
          // ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          data: res.data.map((item) => item.x),
        }, // 图标的X轴
        yAxis: {}, // 图标的y轴，一般不写东西，让图标自己计算得出
        series: [
          {
            name: "销量", // 表的主题
            type: "bar", // 图标的类型
            data: res.data.map((item) => item.val), // X轴当中商品的数量
          },
          {
            name: "价格", // 表的主题
            type: "line", // 图标的类型
            data: res.data.map((item) => item.val), // X轴当中商品的数量
          },
          
        ], // 各类型的可视化图形的配置
      });
      myChart1.setOption({
        series:[
        {
            name: "饼图",
            type: "pie", // pie是饼图
            radius: "50%", // 饼图的半径
            data: res.data.map((item) => {
              return { value: item.val, name: item.x };
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10, // 图形阴影的模糊大小
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ]
      })
    },
  };
  </script>
  
  <style scoped>
  #main {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
  }
  #main1 {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
  }
  </style>
  